<!DOCTYPE html>
<html>
<head>
    <title>Gopa Dashboard</title>
    <link rel="stylesheet" href="/ui/assets/uikit-2.27.1/css/uikit.min.css" />
    <link rel="stylesheet" href="/ui/assets/css/tasks.css" />
    <script src="/ui/assets/js/jquery.min.js"></script>
    <script src="/ui/assets/js/echarts.min.js"></script>
    <script src="/ui/assets/uikit-2.27.1/js/uikit.min.js"></script>
    <script src="/ui/assets/js/jquery.timeago.js"></script>
    <script src="/ui/assets/js/page/tasks.js"></script>
    <meta charset="utf-8">
</head>
<body>

    <div class="uk-container uk-container-center uk-margin-top uk-margin-bottom">
        <nav class="uk-navbar uk-margin-bottom">
            <a class="uk-navbar-brand uk-hidden-small" href="/ui/">GOPA</a>
            <ul class="uk-navbar-nav uk-hidden-small">

                <li class="uk-active">
                    <a href="/ui/page/index.html" >Home</a>
                </li>
                <li >
                    <a href="/ui/page/console.html" >Console</a>
                </li>
                <li >
                    <a href="/ui/page/tasks.html">Tasks</a>
                </li>
                <li>
                    <a href="/ui/boltdb" >Boltdb</a>
                </li>
            </ul>
            <a href="#offcanvas" class="uk-navbar-toggle uk-visible-small" data-uk-offcanvas></a>
            <div class="uk-navbar-brand uk-navbar-center uk-visible-small">GOPA</div>
        </nav>

        <div class="uk-width-1-1 uk-alert">
            <div class="uk-grid">
                <div class="uk-width-1-2">Checker: <span id="checker_task_num">N/A</span></div>
                <div class="uk-width-1-2">Crawler: <span id="crawler_task_num">N/A</span></div>
            </div>
        </div>

        <div class="uk-width-1-1">
            <div id="gopa_stats" style="height:400px;"></div>
        </div>


        <div class="uk-grid" data-uk-grid-margin>
            <div class="uk-width-1-1">


                   <table id="tasks" class="uk-table uk-table-hover uk-table-striped" cellspacing="0" width="100%">
                       <thead>
                       <tr>
                           <th>Domain</th>
                           <th>Path</th>
                           <th>Title</th>
                           <th>Size</th>
                           <th>Updated</th>
                       </tr>
                       </thead>
                       <tbody id="records">
                       </tbody>
                   </table>



            </div>
        </div>

    </div>
    <script type="text/javascript">

        function safeGetValue(v){
            if(v==undefined){
                return 0;
            }
            return v;
        }

        var myChart = echarts.init(document.getElementById('gopa_stats'));

        option = {
            tooltip : {
                formatter: "{a} <br/>{b} : {c}%"
            },
            toolbox: {
                feature: {
                    restore: {show: true},
                    saveAsImage: {show: true}
                }
            },
            series: [
                {
                    name: 'Checker',
                    center: ['20%', '55%'],
                    type: 'gauge',
                    detail: {formatter:'{value}%'},
                    data: [{value: 0, name: 'Checker'}]
                },{
                    name: 'Crawler',
                    center: ['77%', '50%'],
                    type: 'gauge',
                    detail: {formatter:'{value}%'},
                    data: [{value: 0, name: 'Crawler'}]
                }
            ]
        };

        myChart.setOption(option);

        function loadData(){

            // 加载统计数据
            $.get('/stats').done(function (data) {
                if(data["queue.check"]){
                    $("#checker_task_num").text(data["queue.check"].pop+" / "+data["queue.check"].push+", valid: "+data["checker.url"].valid_seed);
                    option.series[0].data[0].value = ((data["queue.check"].pop/data["queue.check"].push)*100).toFixed(2) - 0;
                }

                if(data["crawler.pipeline"]){
                    $("#crawler_task_num").text(safeGetValue(data["crawler.pipeline"].finished)+" / "+data["crawler.pipeline"].total+", error: "+safeGetValue(data["crawler.pipeline"].error)+", break: "+safeGetValue(data["crawler.pipeline"].break)+", queue: "+safeGetValue(data["queue.fetch"].pop)+" / "+data["queue.fetch"].push);
                    option.series[1].data[0].value = (((parseInt(safeGetValue(data["queue.fetch"].pop)))/parseInt(safeGetValue(data["queue.fetch"].push)))*100).toFixed(2) - 0;
                }

                myChart.setOption(option, true);
            });


            //加载最新任务数据
            $.ajax({
                url: '/tasks?size=20',
                type: "get",
                dataType: "json",
                success: function(data, textStatus, jqXHR) {
                    drawTable(data.result);
                }
            });

        }

        timeTicket = setInterval(loadData ,2000);

        loadData();
</script>
</body>
</html>
